<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="" id="form">
        <input type="text" name="" id="ipt">
        <button id="btn">查询学生信息</button>
    </form>



    <script>

        const oBtn = document.getElementById('btn')
        const oIpt = document.getElementById('ipt')
        const oForm = document.getElementById('form')

        oForm.onsubmit=function(){
            //拿到input输入的值
        const userId = oIpt.value;
            //发送ajax请求
            // 实例化 
        const xhr = new XMLHttpRequest();
            //打开路径
            //参数 1.请求方式    2.请求地址   3.是否用异步
            //&_=${Date.now()}:解决浏览器缓存问题
        xhr.open('GET',`/user?userId=${userId}&_=${Date.now()}`,true)
            //发送请求
        xhr.send();
            //绑定事件
        xhr.onreadystatechange = function(){
        
            //判断请求状态码和响应是否成功
            if(xhr.readyState ===4 && (xhr.status >=200 && xhr.status <=299)  ){
                const  date = JSON.parse(xhr.responseText);
                console.log(date);

            }

        }
        return false
        }

    </script>
</body>
</html>